<template>
  <el-card class="box-card bigCard">
    <!-- 头部按钮--搜索框 -->
    <!-- <div slot="header" class="clearfix">
      <el-button
        type="primary"
        size="medium"
        @click="addBroker"
      >添加经纪</el-button>
      <div style="margin-top: 15px" class="search_right">
        <el-input v-model="name_contains" placeholder="请输入经纪名称" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchFn" />
        </el-input>
      </div>
    </div> -->
    <TopBar @ @addFn="addBroker" @searchFn="searchFn">
      <template #left>添加经纪</template>
    </TopBar>
    <!-- 分割线 -->
    <el-divider />
    <!-- 经纪列表 -->
    <template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="image" label="图片" width="180">
          <template v-slot="{ row }">
            <img style="width: 100%" :src="row.image" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" width="180" />
        <el-table-column prop="address" label="地址" width="180" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button size="mini" type="primary" @click="editFn(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分割线 -->
    <!-- <el-divider /> -->
    <!-- 分页 -->
    <!-- <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      @current-change="currentChange"
    /> -->
    <MyPagination :total="total" :page-size="pageControl._limit" @getStart="getStart" />
    <!-- dialog 弹窗 -->
    <el-dialog :title="formData.id ? '编辑经纪' : '新增经纪'" :visible="dialogVisible" @close="closeFn">
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" style="width: 80%" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" style="width: 80%" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formData.phone" style="width: 80%" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formData.address" style="width: 80%" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" style="width: 80%" />
        </el-form-item>
        <el-form-item v-model="formData.image" label="封面">
          <UploadFile ref="staffPhoto" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="addAgentsFn">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { getAgentsList, addAgents, delAgents, getAgentsId, editAgentsId, getSearchId } from '@/api/agents'
import TopBar from '@/views/category/component/top-bar.vue'
export default {
  components: { TopBar },
  data() {
    return {
      tableData: [], // 经纪列表
      dialogVisible: false, // loading弹窗显示/隐藏
      formData: {
        // 双向绑定数据
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      },
      pageControl: {
        _limit: 3,
        _start: 0
      },
      total: 0, // 分页
      pagesize: 4, // 每页的条数
      name_contains: '', // 模糊搜索变量
      // 表单校验规则
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '姓名长度为2到6', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          {
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ],
        phone: [
          { required: true, message: '电话不能为空', trigger: 'blur' },
          {
            pattern: /1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        address: [
          { required: true, message: '地址不能为空', trigger: 'blur' },
          { min: 2, max: 20, message: '地址长度为2到20', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '地址长度为2到50', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getBroker() // 今日页面 调用获取数据接口
  },
  methods: {
    // 获取经纪列表
    async getBroker(name) {
      const res = await getAgentsList({ ...this.pageControl, name_contains: name })
      this.tableData = res.data
      const val = await getSearchId({ name_contains: name })
      this.total = val.data
      console.log(this.total)
    },
    // 模糊搜索
    async searchFn(value) {
      console.log(161, value)
      this.name_contains = value
      await this.getBroker(this.name_contains)
    },
    // element 分页组件的方法 当改变页数时触发 返回值就是当前页数的值
    // currentChange(page) {
    //   console.log(123)
    //   this.pageControl._start = (page - 1) * this.pageControl._limit// 给page赋当前页码的值
    //   this.getBroker(this.name_contains) // 调用接口
    // },
    getStart(start) {
      this.pageControl._start = start
      this.getBroker(this.name_contains)
    },
    // 弹窗显示
    addBroker() {
      this.dialogVisible = true
    },
    // 新增经纪
    async addAgentsFn() {
      await this.$refs.form.validate() // 表单校验通过方法
      // 当formData存在id时 代表是在编辑 反正是在新增
      if (this.formData.id) {
        this.formData.image = this.$refs.staffPhoto.fileList[0].url // 将当前图片地址赋值给formData对象
        await editAgentsId(this.formData) // 编辑经纪
      } else {
        const obj = this.$refs.staffPhoto.fileList[0] // 获取图片对象
        this.formData.image = obj && obj.url // 获取图片地址
        await addAgents(this.formData) // 新增经纪
      }
      this.getBroker() // 更新页面
      this.dialogVisible = false // 关闭弹窗
    },
    // 获取指定经纪
    async editFn(id) {
      this.dialogVisible = true // 显示弹窗
      const res = await getAgentsId(id) // 获取当前id数据
      this.formData = res.data
      this.$refs.staffPhoto.fileList.push({ url: this.formData.image }) // 给图片组件添加图片地址
    },
    // 删除经纪
    async delFn(id) {
      this.$confirm('此操作将永久删除该经纪, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 确定则触发then函数
          // 调用删除角色接口
          await delAgents(id)
          // 调用获取部门信息方法 更新数据
          this.getBroker()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭弹窗
    closeFn() {
      this.dialogVisible = false // 关闭弹窗
      this.$refs.form.resetFields() // 清除校验 表单数据
      this.$refs.staffPhoto.fileList = [] // 重置图片地址
      this.formData = {
        // 重置表单数据
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin: 20px;
}
.clearfix {
  display: flex;
  justify-content: space-between;
}
.el-input-group {
  width: 200px;
}
.search_right {
  width: 600px;
  margin-left: 300px;
}
.el-button--primary {
  // height: 40px;
  margin-top: 13px;
}
::v-deep .el-card__header {
  border-bottom: none;
}
::v-deep .el-pagination {
  text-align: center;
}
::v-deep .el-dialog__header {
  // background-color: pink;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
